import React, { useEffect, useState } from 'react';
import {
    AppstoreOutlined,
    BarChartOutlined,
    CloudOutlined,
    ShopOutlined,
    TeamOutlined,
    UploadOutlined,
    UserOutlined,
    VideoCameraOutlined,
} from '@ant-design/icons';
import { MenuProps } from 'antd';
import { Layout, Menu } from 'antd';
import { HashRouter as Router, Route, Routes, useNavigate } from 'react-router-dom';

import PageHeader from '@component/Header';
// react引用less
import styles from './index.module.less';
import routerTarget, { pathItem } from '@router/index';
const { routeList, pathFlatList } = routerTarget;
const { Header, Content, Footer, Sider } = Layout;

const icons: any[] = [
    UserOutlined,
    VideoCameraOutlined,
    UploadOutlined,
    BarChartOutlined,
    CloudOutlined,
    AppstoreOutlined,
    TeamOutlined,
    ShopOutlined,
];

const translateChildren = (list: pathItem[]) => {
    return list.map((item: pathItem, index: number) => {
      const { name, path, Icon, children } = item;
      const result: any = {
        key: path,
        icon: React.createElement(Icon),
        label: name,
      };
      if (Array.isArray(children)) {
          result.children = translateChildren(children);
      }
      return result;
    });
}

// 构造菜单
const items: MenuProps['items'] = translateChildren(routeList);

const renderRoute = (route: any) => {
  const { WrapComponent = () => {}, path, children } = route;
  if (Array.isArray(children)) {
    return (
      <Route key={path} path={path} element={<WrapComponent />}>{
        children.map((item: any) => {
          return renderRoute(item);
        })
      }</Route>
    )
  }
  return <Route key={path} path={path} element={<WrapComponent />} />;
}

const App: React.FC = () => {
    // const {
    //   token: { colorBgContainer },
    // } = theme.useToken();
    const colorBgContainer = '#ffffff';
    const navigate = useNavigate();
    const handleClick = (item: any) => {
      const { key } = item;
      navigate(key);
    };

    useEffect(() => {
      // console.log('home');
    })

    const [collapsed, setCollapsed] = useState(false);
    const toggleCollapsed = () => {
      setCollapsed(!collapsed);
    };

    return (
        <Layout hasSider>
            <Sider
                style={{
                    overflow: 'auto',
                    height: '100vh',
                    position: 'fixed',
                    left: 0,
                    top: 0,
                    bottom: 0,
                }}
                trigger={null} collapsible collapsed={collapsed}
            >
                <div className={styles.logo}>{collapsed ? 'cc' : 'cc管理系统'}</div>
                <div>
                    <Menu theme="dark" mode="inline" defaultSelectedKeys={['/']} items={items} onClick={handleClick} />
                </div>
            </Sider>
            <Layout className="site-layout" style={{ marginLeft: collapsed ? 80 : 200, transition: 'all 0.2s' }}>
                <Header style={{ padding: 0, background: colorBgContainer }}>
                    <PageHeader collapsed={collapsed} toggleCollapsed={toggleCollapsed}  />
                </Header>
                <Content style={{ margin: '24px 16px 0', overflow: 'initial' }}>
                    <div className={styles.content}>
                        <Routes>
                            {
                              pathFlatList.map((routeItem: any) => {
                                const jsx = renderRoute(routeItem);
                                return jsx;
                              })
                            }
                        </Routes>
                    </div>
                </Content>
                <Footer style={{ textAlign: 'center' }}>Ant Design ©2023 Created by Ant UED</Footer>
            </Layout>
        </Layout>
    );
};

export default App;
